<template>
	<view class="selfPayment">
		<SwitchPatient :fun="swit" balance></SwitchPatient>
		<view class="ItemsToBePaid">
			<text>待缴费项目</text>
			<view v-if="Data.list?Data.list.length:0">
				<view class="ItemsToBePaidList" v-for="v in Data.list" :key="v.registerId">
					<view class="ItemsToBePaidItem">
						<view>
							<text>{{v.feeType}}</text>
							<text>{{v.department}} {{v.doctorName}}</text>
							<text>{{v.appointTime}}</text>
						</view>
						<view>
							<text>¥{{v.fee}}.00</text>
							<view @click="toConfirmInfo(v)">去缴费</view>
						</view>
					</view>
				</view>
			</view>
			<view class="ItemsToBePaidList" v-else style="display: flex;justify-content: center;">
				<text>暂无待缴费项目</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import SwitchPatient from '@/components/SwitchPatient.vue'
	import {
		reactive,
		onMounted
	} from 'vue';
	import {
		selfpayList
	} from '@/api/TopUpService.js';
	import {
		useTopStore
	} from '@/store/TopUpService.js';
	const topStore = useTopStore();
	const Data = reactive({
		list: []
	})
	const toConfirmInfo = (v) => {
		topStore.set((val) => {
			val['swit']['item'] = v;
		});
		uni.navigateTo({
			url: '/pages/selfPayment/confirmInfo/confirmInfo'
		})
	}
	const swit = (v) => {
		selfpayListFu(v.id);
		topStore.set((val) => {
			val['swit'] = v;
		});
	}
	const selfpayListFu = (id) => {
		selfpayList({
			id
		}).then(({
			data
		}) => {
			if (data.msg == 'success') {
				Data.list = data.data;
				Data.list.forEach(v => {
					switch (v.feeType) {
						case 0:
							v.feeType = '门诊费';
							break;
						case 1:
							v.feeType = '检查费';
							break;
						case 2:
							v.feeType = '西药费';
							break;
					}
				})
			}
		}).catch((err) => {
			console.log(err)
		})
	}
	onMounted(() => {
		// selfpayListFu();
	})
</script>

<style lang="less" scoped>
	.selfPayment {
		width: 750rpx;
		color: #5d5d5d;
		background-color: #fdfeff;
		height: 100vh;

		.ItemsToBePaid {
			width: 680rpx;
			margin: 0 auto;

			&>text {
				font-weight: 600;
				font-size: 40rpx;
			}

			.ItemsToBePaidList {
				width: 100%;

				&>text {
					margin: 50rpx 0;
					font-size: 35rpx;
					font-weight: 600;
					color: #aaaaaa;
				}

				.ItemsToBePaidItem {
					width: 100%;
					height: 200rpx;
					border-radius: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border: 1px solid #f2f2f2;
					padding: 0 40rpx;
					box-sizing: border-box;
					margin: 25rpx 0;

					view {
						display: flex;
						flex-direction: column;

						&:first-child {
							font-size: 28rpx;
							color: #aaaaaa;

							text:first-child {
								font-size: 32rpx;
								font-weight: 600;
								color: #5d5d5d;
							}

							text {
								margin: 6rpx 0;
							}
						}

						&:last-child {
							text:first-child {
								font-size: 30rpx;
								color: #f46060;
								font-weight: 600;
								text-align: right;
							}

							view {
								width: 145rpx;
								height: 65rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								font-size: 32rpx;
								background-color: #006eff;
								border-radius: 10rpx;
								color: #fff;
								font-weight: 600;
								margin-top: 35rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
